<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./styles/reset.css">
  <link rel="stylesheet" href="./styles/index.css">
  <script src="./javascript/axios.js"></script>
  <script src="./javascript/flexible.js"></script>
  <link rel="stylesheet" href="./styles/swiper.css">
  <script src="./javascript/swiper.js"> </script>
  <script src="./javascript/art-template.js"></script>
  <script src="./javascript/api/index.js"></script>
</head>

<body>
  <div class="swiper">
    <div class="swiper-wrapper">

    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
  <div id="title"></div>

  <script id="slider" type="text/html">
    {{each shuju.sliders.imgs}}
    <div class="swiper-slide">
        <div class="slider-item">
          <img src="{{$value}}" alt="">
        </div>
      </div>
    {{/each}}
    <div class="title">{{title}}</div>
  </script>

  <script>
    function parseUrl(url) {

      // 希望将url中的问号后面的内容变成 {query: 'vue', language: 'js'}
      // 思路：先把query=vue&language=js 截出来
      var search = url.split('?')[1]
      // 再按&符号分隔成数组[query=vue, language=js]
      var arr = search.split('&')

      var obj = {}
      // 然后循环遍历数组
      for (let i = 0; i < arr.length; i++) {
        // 继续对每一项进行拆分
        // console.log(arr[i]);
        var newArr = arr[i].split('=')
        // console.log(newArr);
        obj[newArr[0]] = newArr[1]
      }
      return obj
    }

    let obj = parseUrl(location.href)
    let id = obj.id


    async function renderSlider() {
      let res = await getDetail(id)
      console.log(res.data.details[0]);
      let html1 = template('slider', {shuju: res.data.details[0]});
      let box = document.querySelector('.swiper-wrapper')
      box.innerHTML = html1
      title.innerHTML = res.data.details[0].sliders.title
      let mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }
      })
    }
    renderSlider()

  </script>
</body>

</html>